<template>
  <!-- <teleport to="body"> -->
  <vxe-modal @close="close" :lock-view="false" :width="660" :height="auto" v-model="state.addModal" resize :mask="true">
    <template #title>
      <div class="w100 h100 fsc mask_title">使用模板</div>
    </template>
    <template #default>
      <div style="height: 500px; overflow-y: auto">
        <p style="
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 10px;
          ">
          <el-input v-model="state.inputvalue" style="width: 80%" placeholder="请输入"
          @blur="templateNameBlur">
            <template #suffix>
              <el-icon>
                <search />
              </el-icon>
            </template>
          </el-input>
          <span class="listInfoBtn" @click="addFn">
            <svg-icon class-name="search-icon" icon-class="xinzeng" />
            新增
          </span>
        </p>
        <Waterfall :list="state.tempList" class="pets" :breakpoints="state.breakpoints" :key="searList">
          <template #default="{ item, url, index }">
            <div class="listBox">
              <p class="p_title">
                <span><em>分析</em><span>{{ item.name }}</span></span>
                <el-button type="primary" link>
                  <span @click="useFn(item)" style="margin-right: 10px;cursor: pointer;">使用</span>
                  <svg-icon @click="editFn(item.id)" class-name="search-icon" icon-class="bianji" />
                </el-button>
              </p>
              <div class="tempBox">
                <p>
                  <span class="temLeft"> 报警原因 </span>
                  <span class="temRight">
                    {{ item.reason }}
                  </span>
                </p>
                <p>
                  <span class="temLeft"> 处理措施 </span>
                  <span class="temRight">
                    {{ item.measure }}
                  </span>
                </p>
                <p>
                  <span class="temLeft"> 处理结果 </span>
                  <span class="temRight">
                    {{ item.result }}
                  </span>
                </p>
                <p>
                  <span class="temLeft"> 使用次数 </span>
                  <span class="temRight">
                    {{ item.usageNumber }}
                  </span>
                </p>
              </div>
            </div>
          </template>
        </Waterfall>
      </div>
    </template>
  </vxe-modal>
  <addTemp :openModal="state.openModal" :editId="state.editId" @cancel="cancelFn" :modaltitle="state.modaltitle"
    :status="status" @sumbitClick="sumbitClick" @delTemp="delTemp" />
  <!-- </teleport> -->
</template>
<script setup>
  import {
    computed,
    reactive,
    watchEffect
  } from "vue";
  import axios from "@/utils/request";
  import {
    searchchannelNoList
  } from "@/api/config";
  import useUserStore from "@/store/modules/user";
  import dayjs from "dayjs";
  import addTemp from "./addTemp.vue";
  import {
    LazyImg,
    Waterfall
  } from "vue-waterfall-plugin-next";
  import {
    ElMessage,
    ElMessageBox,
    ElNotification
  } from "element-plus";
  import "vue-waterfall-plugin-next/dist/style.css";
  const {
    proxy
  } = getCurrentInstance();
  const calendar = ref(null);
  const userStore = useUserStore();
  const emits = defineEmits(["sumbitClick"]);
  const props = defineProps({
    tempList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    tempShow: {
      type: Boolean,
      default: () => {
        return false;
      },
    },
    status: {
      type: String,
      default: "A",
    },
  });
  // 重点
  const state = reactive({
    addModal: props.tempShow,
    inputvalue: undefined,
    templateName: undefined,
    breakpoints: {
      800: {
        //当屏幕宽度小于等于800
        rowPerView: 2,
      },
      500: {
        //当屏幕宽度小于等于500
        rowPerView: 2,
      },
    },
    openModal: false,
    modaltitle: "新增模板",
    editId: 0,
    tempList: []
  });
  function templateNameBlur(){
    gettempList()
  }
  // 获取分析模板
  function gettempList() {
    axios.post("/template/expression/obtainAll", {
      templateType: 'A',
      templateName:state.inputvalue
    }).then((res) => {
      state.tempList = res.data;
    });
  }
  // 打开新增模板弹窗
  const addFn = () => {
    state.openModal = true;
    state.modaltitle = "新增模板";
  };
  // 使用
  function useFn(item) {
    let data = {
      templateType: "分析",
      templateName: item.name,
      usageUser: "使用分析"
    }
    axios.post('templateUsageLog/addTemplateUsageLog', data).then(res => {
      state.addModal=false
      props.tempShow=true
    })
    emits('useFnTemplateClick',item)
    
  }
  // 打开新增模板弹窗
  const editFn = (id) => {
    state.openModal = true;
    state.modaltitle = "修改模板";
    state.editId = id;
  };
  // 关闭新增模板弹窗
  const cancelFn = () => {
    state.openModal = false;
  };
  // 提交模板新增/修改
  const sumbitClick = (data) => {
    if (data.modaltitle == '新增模板') {
      data.form_data.usageNumber = 0
      axios.post("/template/analysis/save", data.form_data).then((res) => {
        if (res.code == 200) {
          ElMessage.success("操作成功");
          state.openModal = false;
          gettempList();
        }
      });
    } else {
      axios.post("/template/analysis/update", data.form_data).then((res) => {
        if (res.code == 200) {
          ElMessage.success("操作成功");
          state.openModal = false;
          gettempList();
        }
      });
    }
  }
  // 删除模板
  const delTemp = (data) => {
    axios.post('/template/analysis/delete', {id:data}).then(res => {
      if (res.code == 200) {
        ElMessage.success("操作成功");
        gettempList();
      }
    })
  }
  // // 提交模板新增/修改
  // const sumbitClick = (data) => {
  //   state.openModal = false;
  //   emits("sumbitClick", data);
  // };
  // // 删除模板
  // const delTemp = (data) => {
  //   emits("delTemp", data);
  // };
  // 关闭使用模板弹窗
  const close = () => {
    emits("close");
  };
  gettempList()
  watchEffect(() => {
    console.log(props.tempShow,'props.tempShow')
    state.addModal = props.tempShow;
  });
</script>
<style lang="scss" scoped>
  .listBox {
    background-color: rgba(170, 119, 238, 0.08);
    border-radius: 4px;
    padding: 16px;

    .p_title {
      padding: 0;
      margin: 0;
      font-size: 14px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      em {
        font-style: normal;
        border-radius: 2px;
        padding: 2px 4px;
        background-color: rgba(170, 119, 238, 0.16);
        color: rgba(170, 119, 238, 1);
        margin-right: 8px;
      }
    }

    .tempBox {
      background-color: rgba(255, 255, 255, 0.6);
      padding: 16px;
      border-radius: 2px;
      margin-top: 10px;

      p {
        display: flex;
        align-items: flex-start;
      }

      .temLeft {
        color: rgba(62, 70, 79, 0.6);
        min-width: 70px;
      }
    }

    p {
      display: flex;
      align-items: center;
      margin-bottom: 0 !important;
    }
  }
</style>